import type { LoadingConfig, AdaptiveConfig } from "@pureadmin/table";
import { ref, onMounted, reactive } from "vue";
import { getActivityList } from "@/api/common";

export function useColumns(typeMapObj: Record<number, string>) {
  const dataList = ref([]);
  const loading = ref(true);
  const columns: TableColumnList = [
    {
      label: "产品名称",
      prop: "title"
    },
    {
      label: "产品图片",
      slot: "image"
    },
    {
      label: "产品位置",
      prop: "type",
      formatter(row) {
        switch (row.type) {
          case 1:
            return "左边";
          case 2:
            return "右上";
          case 3:
            return "右下";
          case 4:
            return "下面";
          default:
            return "未知";
        }
      }
    },
    {
      label: "链接类型",
      prop: "linkType",
      formatter(row) {
        switch (row.linkType) {
          case 0:
            return "无跳转";
          case 1:
            return "图片";
          case 2:
            return "文章";
          case 3:
            return "视频";
          case 4:
            return "VR";
          case 5:
            return "直播";
          case 6:
            return "话题";
          case 7:
            return "商品";
          case 8:
          case 10:
          case 11:
            return "金融产品";
          case 9:
            return "算力";
          // case 10:
          //   return "水机";
          // case 11:
          //   return "充电宝";
          case 12:
            const typeName = typeMapObj[`${row.url}`];
            return `金融列表[${typeName}]`;
          default:
            return "未知";
        }
      }
    },
    {
      label: "内容",
      prop: "url"
    },
    {
      label: "状态",
      width: 80,
      prop: "status",
      formatter(row) {
        switch (row.status) {
          case 1:
            return "开启";
          case 2:
            return "禁用";
          default:
            return "未知";
        }
      }
    },
    {
      label: "操作",
      slot: "operation",
      width: 80,
      fixed: "right"
    }
  ];

  /** 加载动画配置 */
  const loadingConfig = reactive<LoadingConfig>({
    text: "正在加载第一页...",
    viewBox: "-10, -10, 50, 50",
    spinner: `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
    // svg: "",
    // background: rgba()
  });

  /** 撑满内容区自适应高度相关配置 */
  const adaptiveConfig: AdaptiveConfig = {
    /** 表格距离页面底部的偏移量，默认值为 `96` */
    offsetBottom: 110
    /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
    // fixHeader: true
    /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
    // timeout: 60
    /** 表头的 `z-index`，默认值为 `100` */
    // zIndex: 100
  };

  function loadData() {
    return new Promise((resolve, reject) => {
      getActivityList()
        .then(res => {
          const data = res.data;
          dataList.value = data;
          loading.value = false;
          resolve(res.data);
        })
        .catch(error => {
          reject(error);
        });
    });
  }

  // onMounted(() => {
  //   loadData();
  // });

  return {
    loading,
    columns,
    dataList,
    loadData,
    loadingConfig,
    adaptiveConfig
  };
}
